<template>
  <div>
    <div class="main-container-view">
      <div class="header-bar">
        <div class="container">
          <el-row>
            <el-col :span="6">
              <div class="logo-bar">
                <img src="../assets/logo.png"/>
              </div>
            </el-col>
            <el-col :span="18">
              <el-menu class="el-menu-demo" mode="horizontal" :default-active="activeMenuIndex" :router="true">
                <el-menu-item index="/main/account">{{$t('headerMenu.account')}}</el-menu-item>
                <el-submenu index="/main/send">
                  <template slot="title">{{$t('headerMenu.send')}}</template>
                  <el-menu-item index="/main/send/btc">BTC</el-menu-item>
                  <el-menu-item index="/main/send/eth">ETH</el-menu-item>
                  <el-menu-item index="/main/send/ltc">LTC</el-menu-item>
                </el-submenu>
                <el-submenu index="/main/receive" :router="true">
                  <template slot="title">{{$t('headerMenu.receive')}}</template>
                  <el-menu-item index="/main/receive/btc">BTC</el-menu-item>
                  <el-menu-item index="/main/receive/eth">ETH</el-menu-item>
                  <el-menu-item index="/main/receive/ltc">LTC</el-menu-item>
                </el-submenu>
                <el-submenu index="/main/transactions">
                  <template slot="title">{{$t('headerMenu.transactions')}}</template>
                  <el-menu-item index="/main/transactions/btc">BTC</el-menu-item>
                  <el-menu-item index="/main/transactions/eth">ETH</el-menu-item>
                  <el-menu-item index="/main/transactions/ltc">LTC</el-menu-item>
                </el-submenu>
                <el-submenu index="/main/buy">
                  <template slot="title">{{$t('headerMenu.buy')}}</template>
                  <el-menu-item index="/main/buy/btc">BTC</el-menu-item>
                  <el-menu-item index="/main/buy/eth">ETH</el-menu-item>
                  <el-menu-item index="/main/buy/ltc">LTC</el-menu-item>
                </el-submenu>
                <el-submenu index="/main/sell">
                  <template slot="title">{{$t('headerMenu.sell')}}</template>
                  <el-menu-item index="/main/sell/btc">BTC</el-menu-item>
                  <el-menu-item index="/main/sell/eth">ETH</el-menu-item>
                  <el-menu-item index="/main/sell/ltc">LTC</el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="main-bar">
        <div class="container">
          <el-row>
            <el-col :span="6">
              <el-menu class="el-menu-vertical-demo" :router="true" :default-active="activeMenuIndex">
                <el-menu-item index="/main/account">
                  <i class="iconfont icon-shouye"></i>
                  <span slot="title">{{$t('asideMenu.account_home')}}</span>
                </el-menu-item>
                <el-menu-item index="/main/receive">
                  <i class="iconfont icon-qianbao"></i>
                  <span slot="title">{{$t('asideMenu.my_addresses')}}</span>
                </el-menu-item>
                <el-menu-item index="/main/contacts">
                  <i class="iconfont icon-lianxiren"></i>
                  <span slot="title">{{$t('asideMenu.contacts')}}</span>
                </el-menu-item>
                <el-menu-item index="/main/security">
                  <i class="iconfont icon-anquan"></i>
                  <span slot="title">{{$t('asideMenu.security')}}</span>
                </el-menu-item>
                <el-menu-item index="/main/settings">
                  <i class="iconfont icon-shezhi"></i>
                  <span slot="title">{{$t('asideMenu.settings')}}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="18">
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      visible: false,
      activeMenuIndex: this.$route.path
    }
  },
  computed: {
    ...mapState({
      path: state => state.route.path
    })
  },
  methods: {
  },
  watch: {
    path () {
      this.activeMenuIndex = this.$route.path
    }
  }
}
</script>
<style lang="less">
  .main-container-view{
    .header-bar{
      border-bottom: solid 1px #e6e6e6;
      margin-bottom: 18px;
      box-shadow: 0 2px 5px #ccc;
      .logo-bar{
        text-align: center;
        padding: 5px 0;
        img {
          height: 50px;
          display: inline-block;
          vertical-align:top;
        }
      }
      .el-menu{
        border-bottom: none;
      }
    }
    .main-bar{
      margin-bottom: 18px;
    }
  }
</style>
